<script setup lang="ts">
import { Button as VanButton } from 'vant'
// import { useUserStore } from '@/stores/modules/user'
import { useUserStore } from '@/stores'
import { instance, request } from '@/utils/request'
import { useRoute, useRouter } from 'vue-router'
import type { User } from '@/types/user'
/**
 * vue router
 *                    vue2                vue3
 * 组件里使用router    this.$router       useRouter函数(执行后拿到router)
 * 组件里使用route      this.$route       useRoute函数(执行后拿到route)
 * 在js文件中使用       router实例导入      router实例导入
 */
const userStore = useUserStore()
const handleLogin = async () => {
  // const res = await instance.request({
  //   url: '/login/password',
  //   method: 'post',
  //   data: {
  //     mobile: '13211112222',
  //     password: 'abc12345'
  //     // password: 'abc123456'
  //   }
  // })
  const res = await request<User>('/login/password', 'POST', {
    mobile: '13211112222',
    password: 'abc12345'
  })
  console.log(res.data)
  userStore.setUser(res.data)
  console.log('登录成功后跳转到首页逻辑')
}
const handleGetMe = async () => {
  const res = await instance.request({
    url: '/patient/myUser'
  })
  console.log(res.data)
}
const router = useRouter()
const route = useRoute()
const handleGoToHome = () => {
  // vue3中没有this 所以会报错 useRouter
  // this.$router.push()
  // console.log(route.query)
  router.push(route.query.returnUrl as string)
}
</script>

<template>
  <div class="playground-page">
    <h1>playground</h1>
    <h2>user {{ userStore.user }}</h2>
    <van-button @click="handleLogin">login</van-button>
    <van-button type="primary" @click="userStore.delUser()"
      >del user</van-button
    >
    <van-button @click="handleGetMe">get me</van-button>
    <van-button @click="handleGoToHome">跳转首页</van-button>
    <router-view></router-view>
  </div>
</template>

<style scoped lang="scss"></style>
